<template>
  <div class="container">
    <div class="registerBox roundy-20 shadow">
      <div class="title">
        <div class="fontSize-20" style="color: rgb(0, 0, 167); font-weight: bold">
          <i>用户管理系统</i>
        </div>
        <div class="fontSize-30 margin-15">注册</div>
        <div class="fontSize-20 margin-15">注册您的 User 账号</div>

        <div class="totalContent">
          <!-- 邮箱 -->
          <div class="content">
            <!-- <label>电子邮箱:</label> -->
            <LoginInput title="请输入你的邮箱" v-model="userForm.userEmail"></LoginInput>
            <!-- <input v-model="userForm.email" type="text" placeholder="请输入你的邮箱" /> -->
          </div>
          <!-- 验证码 -->
          <div class="yzcontent">
            <label class="yzitem" style="margin-top: 30px">&nbsp;&nbsp;&nbsp;验证码:</label>
            <input class="yzitem" style="width: 100%; height: 50px" v-model="userForm.code" type="text"
              placeholder="请输入验证码" />
            <!-- <button>获取验证码</button> -->
            <LoginButton :class="{'disabled_btn':isCode}" style="margin-left: 22px; margin-top: 21px" :title="titleComputed" @click="sendCode" />
          </div>
          <!-- 登陆密码 -->
          <div class="content">
            <!-- <label>登陆密码:</label>
            <input  v-model="userForm.password" type="text" placeholder="请输入你的密码" /> -->
            <LoginInput v-model="userForm.password" type="password" title="请输入你的密码" />
          </div>
          <!-- 确认密码 -->
          <div class="content">
            <!-- <label>确认密码:</label>
            <input v-model="userForm.password1" type="text" placeholder="再次输入确认密码" /> -->
            <LoginInput style="margin-top: 10px" type="password" v-model="userForm._password" title="再次输入确认密码" />
          </div>
        </div>

        <!-- 注册 -->
        <div class="btn">
          <span>已有账号<RouterLink class="cantSelect pointer" style="color: rgb(43, 117, 201)" to="/login">登录</RouterLink>
            </span>
          <!-- <button>注册</button> -->
          <LoginButton style="margin-top: 10px" title="注册" @click="register" :canClick="canClickBtn" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LoginInput from "../Others/LoginInput.vue";
import LoginButton from "../Others/LoginButton.vue";
import request from "@/utils/request";
/* import { fa } from "element-plus/es/locale"; */

export default {
  name: "RegisterPage",
  components: {
    LoginInput,
    LoginButton,
  },
  data() {
    return {
      userForm: {
        //邮箱
        userEmail: "",
        //验证码
        code: "",
        //密码
        password: "",
        //确认密码
        _password: "",
        codetext: "获取验证码",
      },
      //定时器
      timerId: null,
      //倒计时时间
      startTime: 60,
      //验证码是否禁用
      isCode: false,
      //注册按钮是否可用
      canClickBtn: true,
    };
  },
  computed: {
    titleComputed() {
      return this.userForm.codetext;
    },
  },
  methods: {
    sendCode() {
      request
        .get("/api/start/send", {
          params: this.userForm,
        })
        .then((res) => {
          if (res.code === 200) {
            console.log(res);
          } else {
            console.log("出了一些神秘的问题");
          }
        });
      this.countdown();
    },
    //倒计时
    countdown() {
      if (this.timerId) {
        clearInterval(this.timerId);
      }
      this.timerId = setInterval(() => {
        if (this.startTime <= 0) {
          clearInterval(this.timerId);
          this.userForm.codetext = "获取验证码";
          this.startTime = 60;
          this.isCode=false
          return 0;
        } else {
          this.isCode=true
          this.startTime = this.startTime - 1;
          this.userForm.codetext = "验证码(" + this.startTime + "s)";
        }
      }, 1000);
    },

    register() {
      if(!this.canClickBtn)
        return

      this.canClickBtn = false
      request.post("/api/start/register", this.userForm).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.$router.push('/login')
          this.canClickBtn = true
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
          this.canClickBtn = true
        }
      },
      error => {
        console.log(error.message);
        this.canClickBtn = true
      });
    },
  },
};
</script>

<style scoped>
.disabled_btn{
  background-color: lightgray;
  cursor: not-allowed;
  pointer-events: none;
}
.registerBox {
  height: 600px;
  width: 500px;
  margin: 0px auto;
  margin-top: 10%;
  background-color: white;
}

.shadow {
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
}

.title {
  text-align: center;
  padding: 50px;
}

.text-1 {
  font-size: 20px;
}

.totalContent {
  display: flex;

  flex-wrap: wrap;
}

.content {
  margin-top: 20px;
  width: 100%;
  align-items: flex-start;
  height: 50px;
}

input {
  font-size: 14px;
  width: 80%;
  height: 100%;
  border-radius: 10px;
  border: 1px solid rgb(207, 207, 207);
}

.content label {
  margin-right: 5px;
}

button {
  margin-top: 20px;
  margin-left: 40px;
  width: 120px;
  height: 50px;
  border-radius: 10px;
  border: 1px white;
  background-color: rgb(56, 148, 252);
  color: white;
  font-size: 18px;
}

.btn {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn span {
  font-size: 18px;
  margin-left: 0px;
}

.yzcontent {
  display: grid;
  grid-template-columns: auto auto auto;
}

.yzitem {
  margin-top: 20px;
  margin-left: 5px;
}

input {
  padding-left: 10px;
}
</style>
